<template>
  <div style="background-color: rgba(255, 255, 255, 1); height: 100%">
  <div class="nav">
    <h3 :class="{ active: selectType === 1 }" @click="selectType = 1">
      购买
    </h3>
    <h3 :class="{ active: selectType === 2 }"
        @click="selectType = 2"
        v-if="bloc.OrderInfo.OrderStage === '退货'">
      退货
    </h3>
    <h3 :class="{ active: selectType === 3 }"
        @click="selectType = 3"
        v-if="bloc.OrderInfo.OrderStage === '换货'">
      换货
    </h3>
  </div>

  <div class="form-page" v-if="selectType === 1">
    <div style="height: 640px">
      <Card :bordered="false" :dis-hover="true" :padding="20" >
        <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 购买单信息
        </b>
        <div>
        <b class="label-left">
          购买单号:
        </b>
        <div class='label-left1'>
          {{bloc.OrderInfo.OrderNumber}}
        </div>
        <b class="label-left">
          下单时间:
        </b>
        <div class="label-right">
          {{bloc.OrderInfo.SubmitTime}}
        </div>
        </div>
        <div>
          <b class="label-left">
            消费者电话:
          </b>
          <div class="label-left1">
            {{bloc.OrderInfo.MobilePhone}}
          </div>
          <b class="label-left">
            商品总数量:
          </b>
          <div class="label-right">
            {{bloc.OrderInfo.Quantity}}
          </div>
        </div>

        <div>
          <b class="label-left">
            总金额(元):
          </b>
          <div class='label-left1'>
            {{(bloc.OrderInfo.Amount/100).toFixed(2)}}
          </div>
          <b class="label-left">
            实付款(元):
          </b>
          <div class="label-right">
            {{(bloc.OrderInfo.PaymentAmount/100).toFixed(2)}}
          </div>
        </div>
        <div>
          <b class="label-left">
            使用积分:
          </b>
          <div class='label-left1'>
            {{bloc.OrderInfo.Point}}
          </div>
          <b class="label-left">
            订单状态:
          </b>
          <div class="label-right">
            {{ bloc.OrderInfo.OrderStage}}
          </div>
        </div>
        <div>
          <b class="label-left">
            收货人:
          </b>
          <div class='label-left1'>
            {{bloc.OrderInfo.ConsigneeName}}
          </div>
          <b class="label-left">
            收货人电话:
          </b>
          <div class="label-right">
            {{bloc.OrderInfo.Tel}}
          </div>
        </div>
        <div>
          <b class="label-left-text">
            收货地址:
          </b>
          <div class='label-right-text'>
            {{bloc.OrderInfo.ConsigneeAddress}}
          </div>
        </div>
      </Card>
      <Card :bordered="false" :dis-hover="true" :padding="5" >
        <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 订单商品详情
        </b>

        <div class="list-page">
          <Row>
            <Table
              border
              :loading="bloc.loading"
              :columns="columns1"
              highlight-row
              :data="bloc.paged1.items"
            >
              <slot name="footer" slot="footer">
                <Page
                  show-elevator
                  show-total
                  show-sizer
                  :total="bloc.paged1.itemCount"
                  :current="bloc.paged1.pageIndex"
                  :page-size="bloc.paged1.pageSize"
                  :page-size-opts="[15, 30, 50, 100]"
                  @on-change="(val) => bloc.load(val, bloc.paged1.pageSize)"
                  @on-page-size-change="(val) => bloc.load(bloc.paged1.pageIndex, val)"
                />
              </slot>
            </Table>
          </Row>
        </div>

      </Card>
    </div>
  </div>
  <div class="form-page" v-if="selectType === 2">
      <div style="height: 500px">
        <Card :bordered="false" :dis-hover="true" :padding="20" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 退货信息
          </b>
          <div>
            <b class="label-left">
              单号:
            </b>
            <div class='label-left1'>
              {{bloc.ReturnInfo.OrderNumber}}
            </div>
            <b class="label-left">
              提交时间:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.SubmitTime}}
            </div>
          </div>
          <div>
            <b class="label-left">
              总金额(元):
            </b>
            <div class="label-left1">
              {{(bloc.ReturnInfo.Amount/100).toFixed(2)}}
            </div>
            <b class="label-left">
              总数量:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.Quantity}}
            </div>
          </div>

          <div>
            <b class="label-left">
              申请原因:
            </b>
            <div class='label-left1'>
              {{bloc.ReturnInfo.Cause}}
            </div>
            <b class="label-left">
              问题描述:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.Description}}
            </div>
          </div>
          <div>
            <b class="label-left-text">
              退换状态:
            </b>
            <div class='label-right-text'>
              {{bloc.ReturnInfo.Stage}}
            </div>
          </div>
        </Card>
      </div>
    </div>
  <div class="form-page" v-if="selectType === 3">
      <div style="height: 500px">
        <Card :bordered="false" :dis-hover="true" :padding="20" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 换货信息
          </b>
          <div>
            <b class="label-left">
              单号:
            </b>
            <div class='label-left1'>
              {{bloc.ReturnInfo.OrderNumber}}
            </div>
            <b class="label-left">
              提交时间:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.SubmitTime}}
            </div>
          </div>
          <div>
            <b class="label-left">
              总金额(元):
            </b>
            <div class="label-left1">
              {{(bloc.ReturnInfo.Amount/100).toFixed(2)}}
            </div>
            <b class="label-left">
              总数量:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.Quantity}}
            </div>
          </div>
          <div>
            <b class="label-left">
              申请原因:
            </b>
            <div class='label-left1'>
              {{bloc.ReturnInfo.Cause}}
            </div>
            <b class="label-left">
              问题描述:
            </b>
            <div class="label-right">
              {{bloc.ReturnInfo.Description}}
            </div>
          </div>
          <div>
            <b class="label-left-text">
              退换状态:
            </b>
            <div class='label-right-text'>
              {{bloc.ReturnInfo.Stage}}
            </div>
          </div>
        </Card>
        <Card :bordered="false" :dis-hover="true" :padding="5" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 换货详情
          </b>

          <div class="list-page">
            <Row>
              <Table
                border
                :loading="bloc.loading"
                :columns="columns3"
                highlight-row
                :data="bloc.paged3.items"
              >
                <slot name="footer" slot="footer">
                  <Page
                    show-elevator
                    show-total
                    show-sizer
                    :total="bloc.paged3.itemCount"
                    :current="bloc.paged3.pageIndex"
                    :page-size="bloc.paged3.pageSize"
                    :page-size-opts="[15, 30, 50, 100]"
                    @on-change="(val) => bloc.load(val, bloc.paged3.pageSize)"
                    @on-page-size-change="(val) => bloc.load(bloc.paged3.pageIndex, val)"
                  />
                </slot>
              </Table>
            </Row>
          </div>

        </Card>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {Route} from 'vue-router';
    import {DetailBloc} from '@/view/order/DetailBloc';

    const columns1 = (bloc: DetailBloc) => [
        {
            title: '商品品号',
            key: 'ProductNumber',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '商品名称',
            key: 'ProductName',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '颜色',
            key: 'ColourDescription',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '单价(元)',
            key: 'UnitPrice',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: (params.row.UnitPrice / 100).toFixed(2)
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '数量',
            key: 'Quantity',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '总价(元)',
            key: 'TotalPrice',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: (params.row.UnitPrice / 100 * params.row.Quantity).toFixed(2)
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        }
    ];
    const columns3 = (bloc: DetailBloc) => [
        {
            title: '商品名称',
            key: 'ProductName',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '换货品号',
            key: 'ProductNumber',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '换货颜色',
            key: 'ColourDescription',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '单价(元)',
            key: 'UnitPrice',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: (params.row.UnitPrice / 100).toFixed(2)
                    }
                });
            },
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '数量',
            key: 'Quantity',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '退货品号',
            key: 'ReturnProductNumber',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '退货颜色',
            key: 'ReturnColourDescription',
            align: 'left',
            minWidth: 220,
            tooltip: true
        }
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.OrderId = vm.idx;
                if (vm.bloc.OrderId) {
                    vm.bloc.load(vm.bloc.OrderId);
                } else {
                    vm.$Message.error('操作错误');
                }
            });
        }
        get idx() {
            return Number(this.$route.params.id);
        }

        bloc: DetailBloc = new DetailBloc();
        columns1 = columns1(this.bloc);
        columns3 = columns3(this.bloc);
        selectType: any = 1;
    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0;
  }
  .form-page .ivu-card {
    height: 50%;
  }
  .label-left{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 40px;
  }
  .label-left1{
    width: 40%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  .label-right{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  .label-left-text{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 40px;
  }
  .label-right-text{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 40px;
    text-align: left;overflow:auto;display: flex;justify-content: center;
    align-items: center;
  }
  .label-right-text p{
    text-indent: 4em;
    text-align: left;
    display: inline-block;
  }

  .demo-upload-list{
    height:300px;
    width:400px
  }
  .nav {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    display: flex;
    justify-content: flex-start;

    h3 {
      padding: 0 20px;
      cursor: pointer;
    }
    .active {
      border-bottom: 1px solid #559df9;
      color: #559df9;
    }
  }

</style>
